<template>
	<view id='order-item' class="order-item">
		<view class="order-img">
			<base-img></base-img>
		</view>
		<view class="order-right">
			<view class="order-top">
				<view class="order-name">海蓝之谜修护抗老套装紧海蓝之谜修护抗老套装紧海蓝之谜修护抗老套装紧</view>
				<view class="goods-buy">
					<view class="goods-price">¥120.00</view>
					<view class="goods-num">x1</view>
				</view>
			</view>
			<view class="shouhou-wrap">
				<text class="shouhou1">退款中</text>
				<text class="shouhou2">未发货</text>
			</view>
		</view>
	</view>
</template>

<script>
	import baseImg from '../base-img/base-img.vue';
	export default {
		name:"order-item",
		components:{
			baseImg
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.order-item{
		display: flex;
	}
	.order-img{
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
		overflow: hidden;
		flex-shrink: 0;
		margin-right: 24rpx;
	}
	.order-right{
		flex:1;
	}
	.order-top{
		display: flex;
		justify-content: space-between;
		.order-name{
			width: 336rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.goods-num{
			color:#999;
			text-align: right;
		}
	}
	.shouhou-wrap{
		display: flex;
		justify-content: flex-end;
		font-size: 24rpx;
		margin-top:12rpx;
		.shouhou1{
			color:#F8A73D;
			padding-right:14rpx;
		}
		.shouhou2{
			color:$dis-font-color;
		}
	}
</style>